<script lang="tsx">
/**
 * 博客文章
 */
export default {
  name: "blog-texts"
}
</script>

<script lang="tsx" setup>
import {reactive, ref} from "vue"
import {definePageModel, PageModel} from "@/frame/view/layout/page-model/constructor.ts"
import YyImage from "@/frame/components/yy-image/index.vue"
import {processRequest} from "@/frame/apis/request"

/**
 * 下拉列表
 */
const reflections = reactive<{
  blogCategoryList: any[];
}>({
  blogCategoryList: []
})

/**
 * 获取物料列表
 */
const getBlogCategoriesList = async () => {
  const result: any = await processRequest.get("/api/BlogCategories", {
    currentPage: 1,
    pageSize: 9999
  })
  reflections.blogCategoryList = result.dataList
}

getBlogCategoriesList()

/**
 * 页面配置
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: "/api/BlogTexts",
  searchForm: {
    els: [
      {
        eType: "el-input",
        prop: "title",
        props: {
          placeholder: "文章标题",
          clearable: true
        }
      }
    ]
  },
  programForm: {
    els: [
      {
        label: "新增",
        eType: "el-button",
        props: {
          type: "primary"
        },
        event: "add"
      }
    ]
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    props: {
      stripe: true,
      border: true
    },
    operation: {
      width: 100,
      els: [
        {
          eType: "el-button",
          label: "编辑",
          event: "edit",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        },
        {
          eType: "el-button",
          label: "删除",
          event: "delete",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        }
      ]
    },
    els: [
      {
        label: "文章类别",
        prop: "categoryName",
        minWidth: 60
      },
      {
        label: "文章图片",
        prop: "image",
        minWidth: 60,
        renderFn(data) {
          return <YyImage data={data.image} width={40} height={40}/>
        }
      },
      {
        label: "背景图片",
        prop: "backgroundImage",
        minWidth: 60,
        renderFn(data) {
          return <YyImage data={data.backgroundImage} width={40} height={40}/>
        }
      },
      {
        label: "文章标题",
        prop: "title",
        minWidth: 60
      },
      {
        label: "文章内容",
        prop: "text",
        minWidth: 60
      }
    ]
  },
  form: {
    title: "新增/编辑",
    width: 1000,
    sheetForm: {
      initValue: {
        isEnable: true
      },
      labelWidth: "100px",
      els: [
        {
          label: "文章类别名称",
          eType: "el-select",
          prop: "categoryName",
          props: {
            placeholder: "文章类别名称",
            clearable: true
          },
          optionsData: {
            reflect: "blogCategoryList",
            label: "name",
            value: "id"
          }
        },
        {
          label: "文章图片",
          eType: "el-upload",
          prop: "image",
          props: {
            placeholder: "文章图片",
            action: "/development/anqin/api/Upload",
            limit: 1
          }
        },
        {
          label: "文章背景图片",
          eType: "el-upload",
          prop: "backgroundImage",
          props: {
            placeholder: "文章背景图片",
            action: "/development/anqin/api/Upload",
            limit: 1
          }
        },
        {
          label: "文章标题",
          eType: "el-input",
          prop: "title",
          props: {
            placeholder: "文章标题",
            clearable: true
          }
        },
        {
          label: "文章内容",
          eType: "el-input",
          prop: "text",
          props: {
            placeholder: "文章内容",
            type: "textarea"
          }
        }
      ]
    }
  }
})

/**
 * 新增
 */
const handleAdd = () => {
  pageModelRef.value.handleAdd()
}

/**
 * 编辑
 */
const handleEdit = (row: any) => {
  pageModelRef.value.handleEdit(row)
}

/**
 * 删除
 */
const handleDelete = (row: any) => {
  pageModelRef.value.handleDelete(row)
}

</script>

<template>
  <PageModel ref="pageModelRef" :PageModel="config" :reflections="reflections" @add="handleAdd" @delete="handleDelete"
             @edit="handleEdit"/>
</template>

<style lang="scss" scoped>
::v-deep(.el-table__cell) {
  position: static !important;
}
</style>
